有的时候我们想实现一个数字从a逐渐递增到b的跳动效果,如果用rxjs的话就可以轻松实现。废话不多说直接上源码:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/take';
import 'rxjs/add/operator/scan';

// start: 开始数字 end: 结束数字 duration: 持续时间 interval: 跳动几次 cb: 回调
export function jump({ start, end, duration = 300, interval = 10, cb }) {
  const delta = Math.abs(end - start);
  const sign = Math.sign(end - start);
  const numberIncrease = Math.floor(delta / interval);
  const timeIncrease = duration / interval;
  Observable
    .interval(timeIncrease)
    .take(interval)
    .scan((acc) => acc + (numberIncrease * sign), start)
    .subscribe({
      next: (n) => {
        cb(n);
      },
      // 用complete保证数字最终会变为end
      complete: () => {
        cb(end);
      },
    });
}

TonyZhu
764 声望56 粉丝

蚂蚁金服大安全风控+团队招人,前端后台都要,简历发送至huitong.zht@antfin.com